<template>
  <div id="i_gauge" class="mymap" v-on-echart-resize></div>
</template>

<script>
import '@/chart.resize'
export default {
  data() {
    return {
      // 销售额统计数据和配置
      linedata: [
        [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
        [24, 10, 423, 684, 190, 30, 10, 430, 90, 380, 190, 420],
        [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
      ]
    }
  },
  methods: {
    i_gauge() {
      const option = {
        tooltip: {
          formatter: '{a} <br/>{b} : {c}%'
        },
        series: [
          {
            name: '飞升运势',
            type: 'gauge',
            detail: { formatter: '{value}%' },
            data: [{ value: 50, name: '飞升率' }]
          }
        ]
      }

      const myChart = this.$echarts.init(document.getElementById('i_gauge'))
      myChart.setOption(option)

      setInterval(function () {
        option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0
        myChart.setOption(option, true)
      }, 2000)
    }
  },
  mounted() {
    // 使用 mounted 并不能保证钩子函数中的 this.$el 在 document 中
    this.$nextTick(function () {
      this.i_gauge()
    })
  }
}
</script>

<style lang="less" scoped>
</style>
